export const option = {
    tooltip: {
        trigger: 'axis',
        //formatter: '{a}',
        textStyle: {
            fontSize: 10
        },
    },
    legend: {
        orient: 'horizontal',
        left: 'center',
        data: ['CLI', 'PAR'],
        textStyle: {
            color: '#fff'
        },
        icon: 'path://M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m0 213.333334a213.333333 213.333333 0 1 1 0 426.666666 213.333333 213.333333 0 0 1 0-426.666666z'
    },
    color: ['#2b9cdf', '#e75b2e'],
    xAxis: [{
        type: 'category',
        axisline: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#909293',
            }
        },

        axisTick: {
            show: false
        },
        axisline: {
            show: true,
            lineStyle: {
                type: 'dotted'
            }
        },
        data: ['A', 'B', 'C', 'D', 'E'],
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        axisLabel: {
            textStyle: {
                color: '#909293',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#3b4042',
            }
        },

        axisTick: {
            show: false
        },
    }],
    series: [{
        name: 'CLI',
        type: 'bar',
        smooth: 0.5,
        showSymbol: false,
        data: [20, 30, 10, 80, 60],
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                    offset: 1,
                    color: '#054c92'
                }, {
                    offset: 0,
                    color: '#0089b2'
                }]
            }
        },
        barWidth: 20,
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(255,255,255,0.14)',
            borderColor: '#474b4d',
            borderWidth: 1,
            borderType: 'solid'
        }
    }, {
        name: 'PAR',
        type: 'bar',
        showSymbol: false,
        smooth: 0.5,
        itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                    offset: 1,
                    color: '#f04f19'
                }, {
                    offset: 0,
                    color: '#ffa13d'
                }]
            }
        },
        barWidth: 20,
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(255,255,255,0.14)',
            borderColor: '#474b4d',
            borderWidth: 1,
            borderType: 'solid'
        },
        data: [10, 30, 60, 30, 20]
    }]
}

export function handlerOptions(chart, newConfig) {
    if (newConfig && (Object.keys(newConfig).length !== 0)) {
        chart.setOption({ ...newConfig }, false);
    }
}